
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 编辑器使用基础</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-编辑器使用基础FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="编辑器使用基础 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link current">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>编辑器使用基础</h1>
    
    <h2 id="打开项目"><a href="#打开项目" class="headerlink" title="打开项目"></a>打开项目</h2><p>启动FairyGUI编辑器后，首先显示的是欢迎窗口：</p>
<p><img src="../../images/QQ20191202-144514.png" alt></p>
<ul>
<li><code>创建新项目</code> 点击后显示创建项目的对话框。</li>
<li><code>打开项目</code> 通过选择一个项目描述文件 xxx.fairy 打开一个已有项目。</li>
<li><code>打开文件夹</code> 通过选择项目所在的目录打开一个已有项目。如果你的项目是2.x版本创建的项目，那么只能用这个菜单打开。</li>
<li><code>最近打开项目</code> 曾经打开过的项目可以直接从列表中点击打开。点击左边的X可以删掉历史记录，但不会删掉项目内容。</li>
</ul>
<p>编辑器支持同时打开多个项目。Windows平台下，可以通过重复双击桌面上的图标启动多个FairyGUI编辑器。Mac平台下，你可以在打开一个项目后，再点击主菜单“文件”-&gt;“新建窗口”，然后再打开其他项目。</p>
<h2 id="创建新项目"><a href="#创建新项目" class="headerlink" title="创建新项目"></a>创建新项目</h2><p><img src="../../images/QQ20191203-155930.png" alt></p>
<p>在指定位置创建一个新的UI项目。</p>
<ul>
<li><code>项目名称</code> 项目名称。可以使用中文，创建后也可以随便修改。</li>
<li><code>项目位置</code> 项目位置。<strong>注意：请不要使用带中文的路径。</strong></li>
<li><code>项目类型</code> UI项目类型，即UI实际运行的平台。不同的平台在显示效果、发布结果上有一定的差别。不过不需要担心这里选择错了项目类型，在项目创建后可以随时调整UI项目类型，操作位置在菜单“文件-&gt;项目设置”里。</li>
</ul>
<p>FairyGUI的项目在文件系统的结构为：</p>
<ul>
<li><code>assets</code> 包内容放置目录。<ul>
<li><code>package1</code> 每个包一个目录。目录名就是包名。</li>
</ul>
</li>
<li><code>assets_xx</code> 分支内容放置目录，xx是分支名称。多个分支则存在多个类似名称的目录。</li>
<li><code>settings</code> 配置文件放置目录。</li>
<li><code>.objs</code> 内部数据目录。<strong>注意：不要加入版本管理，因为这里的内容是不需要共享的。</strong></li>
<li><code>test.fairy</code> 项目标识文件。文件名就是项目名称，可以随便修改。</li>
</ul>
<h2 id="主界面"><a href="#主界面" class="headerlink" title="主界面"></a>主界面</h2><p><img src="../../images/QQ20191206-124838.png" alt></p>
<p>编辑器主界面由以下几个部分组成：</p>
<ol>
<li>主菜单。在Mac系统里，主菜单和Mac应用程序菜单集成；在Windows系统里，主菜单显示在主界面最上方。</li>
<li>主工具栏。常用的功能按钮。</li>
<li>文档视图，包括已打开的文档的列表，侧工具栏和舞台区域。</li>
<li>状态栏，显示控制台输出的最后一条信息。点击可以打开控制台。</li>
<li>各个功能视图，用户可以按使用习惯将它们拖动到不同位置，也可以关闭。右键点击面板的标题栏，在右键菜单中选择“关闭”即可。如果要重新打开，在“主菜单-&gt;视图”里操作。</li>
</ol>
<h2 id="主工具栏"><a href="#主工具栏" class="headerlink" title="主工具栏"></a>主工具栏</h2><ul>
<li><p><img src="../../images/maintb_01.png" alt> 新建包。</p>
</li>
<li><p><img src="../../images/maintb_02.png" alt> 新建组件。</p>
</li>
<li><p><img src="../../images/maintb_03.png" alt> 新建标签。</p>
</li>
<li><p><img src="../../images/maintb_04.png" alt> 新建按钮。</p>
</li>
<li><p><img src="../../images/maintb_05.png" alt> 新建下拉框。</p>
</li>
<li><p><img src="../../images/maintb_06.png" alt> 新建进度条。</p>
</li>
<li><p><img src="../../images/maintb_07.png" alt> 新建拖动条。</p>
</li>
<li><p><img src="../../images/maintb_08.png" alt> 新建字体。</p>
</li>
<li><p><img src="../../images/maintb_09.png" alt> 新建动画。</p>
</li>
<li><p><img src="../../images/maintb_10.png" alt> 导入素材。从文件管理器/访达中导入。</p>
</li>
<li><p><img src="../../images/maintb_11.png" alt> 保存当前文档。</p>
</li>
<li><p><img src="../../images/maintb_12.png" alt> 保存所有文档。</p>
</li>
<li><p><img src="../../images/maintb_13.png" alt> 发布。默认功能是发布当前的活跃包（如果编辑器焦点在资源库，则活跃包是指资源库当前选中的资源所在的包；如果编辑器焦点在文档视图，则活跃包是指当前正在编辑的组件所在的包）。这个功能可以通过<a href="preference.html">偏好设置</a>的选项改变为发布所有的包或者发布所有修改过但未发布的包。</p>
</li>
<li><p><img src="../../images/maintb_14.png" alt> 仅发布定义。如果用户没有修改图片、动画、字体等素材，而仅仅修改了界面布局之类，可以只发布定义，也就是不重新生成纹理集。这样可以提升发布速度。但如果包的内容不是非常多，这个提升并不显著。</p>
</li>
<li><p><img src="../../images/maintb_15.png" alt> 打开发布设置对话框。</p>
</li>
<li><p><img src="../../images/maintb_16.png" alt> 进入测试模式，显示测试界面。</p>
</li>
<li><p><img src="../../images/maintb_17.png" alt> 重新启动测试。仅在测试模式下有效。</p>
</li>
<li><p><img src="../../images/maintb_18.png" alt> 设定舞台缩放比例，背景色，辅助线等。调整舞台比例除了通过这里的下拉框选择外，还可以通过以下几种方式：</p>
<ul>
<li>按住Ctrl/Cmd键同时滚动鼠标滚轮；</li>
<li>使用快捷键Ctrl/Cmd+加号或减号；</li>
<li>使用快捷键Ctrl+1可以恢复100%比例。</li>
</ul>
<p>点击左边屏幕图标弹出以下对话框：</p>
<p><img src="../../images/QQ20191207-213759.png" alt></p>
<ul>
<li><code>背景颜色</code> 舞台的背景颜色。</li>
<li><code>画布颜色</code> 组件的背景颜色。如果组件需要与众不同的背景颜色，可以在组件属性里设置。</li>
<li><code>显示组件边缘虚线</code> 在文档里用虚线显示组件的包围。</li>
<li><code>显示对齐提示线</code> 当移动或改变元件尺寸时，如果元件的上下左右边缘和其他元件对齐时，会有绿色的提示线提示。</li>
<li><code>每个文档使用单独的缩放比例</code> 如果不勾选，则所有文档共用缩放比例设置；如果勾选，则每个文档使用单独的缩放比例设置，例如编辑文档A时，将文档缩放设置为80%，切换到编辑文档B，则缩放比例自动恢复为100%，再切换回文档A，缩放比例自动恢复为80%。</li>
</ul>
</li>
<li><p><img src="../../images/maintb_19.png" alt> 切换当前项目的分支。点击左边图标可以打开分支设置对话框。</p>
</li>
<li><p><img src="../../images/maintb_20.png" alt> 切换当前项目的语言。点击左边图标可以打开语言设置对话框。</p>
</li>
</ul>
<h2 id="资源库"><a href="#资源库" class="headerlink" title="资源库"></a>资源库</h2><p><img src="../../images/QQ20191205-123844.png" alt></p>
<p>资源库视图里采用树状结构显示。顶层节点是包，每个包下面可以创建文件夹。</p>
<h3 id="一般操作"><a href="#一般操作" class="headerlink" title="一般操作"></a>一般操作</h3><ul>
<li><p><code>导入</code> 将图片、声音、动画、文字等素材从文件管理器/访达中拖动到资源库，完成资源的导入。也可以直接将素材放置到包目录里，然后点击刷新按钮。支持将另外项目的包直接拷入到assets目录。</p>
</li>
<li><p><code>移动</code> 资源可以在各个文件夹或者各个包之间随意拖动，不会破坏资源之间的引用关系。文件夹也可以拖动。</p>
</li>
<li><p><code>快速定位</code> <strong>当焦点在库视图时，在键盘上连续按下字母，可以快速定位到当前目录下指定名称的资源</strong>。例如，连续按下abc，则定位到名称以“abc”开头的第一个资源；如果是中文字符，则只需按下拼音的第一个字母。例如，连续按下csb，则定位到名称以“测试包”开头的第一个资源。</p>
</li>
<li><p><code>重命名</code> 按下F2可修改资源名称。</p>
</li>
</ul>
<h3 id="工具栏"><a href="#工具栏" class="headerlink" title="工具栏"></a>工具栏</h3><ul>
<li><p><img src="../../images/libtb_01.png" alt> 检查<strong>所有包</strong>的package.xml，看是否被外部修改，如果有，则重新载入包；同时在文件系统里检查所有<strong>已打开的包</strong>，如果有资源放置在包目录下，但不在包中的，则导入到包。</p>
</li>
<li><p><img src="../../images/libtb_02.png" alt> 在库中定位当前活动文档对应的组件。</p>
</li>
<li><p><img src="../../images/libtb_03.png" alt> 与编辑器连接。激活这个功能后，当活动文档发生切换时，会同时在库中选中活动文档对应的组件。 </p>
</li>
<li><p><img src="../../images/libtb_04.png" alt> 切换两栏视图。库视图支持两种结构，单栏和两栏。单栏就是传统的树结构；两栏则由左边的树和右边的列表组成。</p>
<p><img src="../../images/QQ20191206-120538.png" alt></p>
</li>
<li><p><img src="../../images/libtb_05.png" alt> 全部收缩。</p>
</li>
</ul>
<h3 id="右键菜单"><a href="#右键菜单" class="headerlink" title="右键菜单"></a>右键菜单</h3><ul>
<li><p><code>属性</code> 修改资源的属性，对图片、动画这些资源，支持多选。例如，选定了多个图片后，点击属性，弹出如下对话框：</p>
<p><img src="../../images/QQ20191206-124710.png" alt></p>
<p>这个功能对文件夹同样有效。选中文件夹后，点击属性，弹出如下对话框：</p>
<p><img src="../../images/QQ20191206-124837.png" alt></p>
</li>
<li><p><code>复制</code> 复制选中的资源。提示：复制、粘贴功能支持跨项目，同时打开两个项目后，就可以互相复制粘贴。</p>
</li>
<li><p><code>移动至</code> 点击后弹出一个对话框用于选择移动的目标位置。</p>
</li>
<li><p><code>粘贴</code> 粘贴已复制的内容以及他们<strong>引用的未导出的资源</strong>到当前位置。如果粘贴时有同名的情况，会有这样一个提示：</p>
<p><img src="../../images/QQ20191205-141037.png" alt></p>
<ul>
<li><code>重命名</code> 重命名同名的资源。</li>
<li><code>替换</code> 覆盖同名的资源。</li>
<li><code>跳过</code> 不进行粘贴操作，如果粘贴的内容中含有对该资源的引用，则同时修改引用。举例：现准备粘贴组件A和图片B，A组件里放置了图片B。粘贴的目标位置已经含有同名资源dest/B，如果选择跳过，则最后粘贴的只有组件A，而且在新的A组件里，B图片对应的是dest/B。</li>
</ul>
</li>
<li><p><code>粘贴全部</code> 粘贴已复制的内容以及他们<strong>引用的所有资源</strong>到当前位置。</p>
</li>
<li><p><code>更新资源</code> 使用新的资源替换当前选定的资源。也可以在文件管理器/访达中直接替换文件，后者适合批量操作。</p>
</li>
<li><p><code>设置为导出</code> 设置资源为导出。包内的每个资源都有一个是否导出的属性，<strong>已导出的资源的图标右下角有一个小红点</strong>。一个包只能使用其他包设置为已导出的资源，而设置为不导出的资源是不可访问的。同时，只有设置为导出的组件才可以使用代码动态创建。</p>
</li>
<li><p><code>在文件管理器（访达）中打开</code> 在文件管理器（或访达）中定位选中的资源。<strong>注意，如果资源路径中含有空格，则可能定位失败。</strong></p>
</li>
<li><p><code>创建分支</code> 详见<a href="branch.html">分支功能</a>里的介绍。</p>
</li>
</ul>
<h3 id="包分组"><a href="#包分组" class="headerlink" title="包分组"></a>包分组</h3><p>当库面板里的包比较多时，查找东西比较麻烦。编辑器提供了将包分组的功能。</p>
<p><img src="../../images/QQ20191206-152907.png" alt></p>
<p>点击编辑分组，显示对话框：</p>
<p><img src="../../images/QQ20191206-152955.png" alt></p>
<p>左边列表可以对分组进行增删改和调整显示顺序；右侧列表选择在该分组中的包。<br>特别的，<strong>我的工作区（本地）</strong>是一个特别的分组，这个分组不可删除不可改名，它的设置保存在用户本机中，不会保存到项目的settings里，因此不会与团队共享。它专用于记录个人工作任务。</p>
<h2 id="收藏夹"><a href="#收藏夹" class="headerlink" title="收藏夹"></a>收藏夹</h2><p>收藏夹提供了一个快速访问常用组件的功能。可以将一些常用的组件或资源放置在收藏夹里，便于快速访问。</p>
<p>在资源库里右键单击一个或多个资源，然后在右键菜单中选择“加入收藏夹”，就可以将资源加入收藏夹。</p>
<h2 id="显示列表"><a href="#显示列表" class="headerlink" title="显示列表"></a>显示列表</h2><p><img src="../../images/QQ20191206-154856.png" alt></p>
<p>这里显示的是组件的显示列表。按显示顺序排列，列表中越往下的元件显示在越前面。可以在列表中直接拖拽改变元件改变它们在显示列表中的位置。</p>
<ul>
<li><img src="../../images/hierarchytb_01.png" alt> 展开或者收起所有组</li>
<li><img src="../../images/hierarchytb_02.png" alt> 重命名当前选定的元件</li>
<li><img src="../../images/hierarchytb_03.png" alt> 屏蔽显示控制器。屏蔽后所有被显示控制器隐藏的内容都会显示出来。参考<a href="controller.html#显示控制">这里</a>。</li>
<li><img src="../../images/hierarchytb_04.png" alt> 屏蔽关联系统。屏蔽后，当手动修改元件坐标和尺寸时，关联系统不会起作用。例如，A关联了B的位置，你想移动B向A靠近，但由于关联系统的作用，B和A的距离始终保持不变，所以很难完成操作。这时你可以屏蔽关联系统再操作。操作完成后，记得解除屏蔽。</li>
<li><img src="../../images/hierarchytb_05.png" alt> 隐藏元件。点击工具栏按钮则隐藏所有元件，单击每行对应位置的圆点则隐藏指定的元件。这个隐藏功能是编辑辅助功能，不影响运行时UI表现。例如一个元件遮住了另一个元件，你可以用这个功能临时隐藏上方的元件。</li>
<li><img src="../../images/hierarchytb_06.png" alt> 锁定元件。点击工具栏按钮则锁定所有元件，单击每行对应位置的圆点则锁定指定的元件。这个锁定功能是编辑辅助功能，不影响运行时UI表现。例如一些元件不希望在编辑过程中误操作改变位置或尺寸等，那么可以锁定它们。</li>
</ul>
<h2 id="动效"><a href="#动效" class="headerlink" title="动效"></a>动效</h2><p><img src="../../images/QQ20191209-110336.png" alt></p>
<p>这里显示的是组件的动效列表。</p>
<p><img src="../../images/transtb_01.png" alt> 创建新的动效。创建后将组件立刻进入<a href="transition.html#编辑动效">动效编辑模式</a>。</p>
<p><img src="../../images/transtb_02.png" alt> 重命名动效。</p>
<p><img src="../../images/transtb_03.png" alt> 复制动效。复制后动效列表会增加一个内容完全相同的新动效。</p>
<p><img src="../../images/transtb_04.png" alt> 删除动效。</p>
<h2 id="时间轴"><a href="#时间轴" class="headerlink" title="时间轴"></a>时间轴</h2><p><img src="../../images/QQ20191209-111930.png" alt></p>
<ol>
<li>时间轴和播放头位置。时间显示的单位是秒。</li>
<li>参与动效的各个元件和属性。左边显示的是元件名称和类型，右边显示的是属性名称。要在此增加新项目，可以在舞台上点击元件，然后在弹出的右键菜单中选择属性。</li>
<li>各个属性的时间轴。<img src="../../images/20170808103109.png" alt>表示关键帧，<img src="../../images/20170808103354.png" alt>表示两个关键帧之间使用插值动画，<img src="../../images/QQ20191211-235945.png" alt>红色小红旗则表示这个关键帧有Label，可以通过代码按名称访问。</li>
<li>信息显示区。<ul>
<li><code>FPS</code> 动效的帧频。可以在<a href="transition.html#动效属性">这里</a>修改。</li>
<li><code>frame</code> 当前播放头在第几帧。</li>
<li><code>time</code> 当前播放头的时间，单位是秒。</li>
</ul>
</li>
<li>时间轴放大/缩小。向右拖动，时间轴可编辑的长度增加。例如滑块在最左边时，时间轴最大只显示30秒，如果你要制作几分钟的内容，那么可以把滑块往右拖。</li>
</ol>
<p>时间轴操作:</p>
<ul>
<li><code>单选</code> 鼠标左键点击一个帧。</li>
<li><code>多选</code> 按住CTRL可增加选择，按住SHIFT可选择一个范围。或者直接在空白处按下鼠标左键不松开然后移动选择一个范围。</li>
<li><code>拖动</code> 直接拖动选区到其他位置。如下面动图演示：<br><img src="../../images/gaollg5.gif" alt></li>
</ul>
<p>右键菜单：</p>
<p><img src="../../images/2017-08-07_175009.png" alt></p>
<ul>
<li><code>转换为关键帧</code> 转换当前帧为关键帧。</li>
<li><code>清除关键帧</code> 将关键帧变成普通帧。</li>
<li><code>插入帧</code> 插入一个帧，快捷键是Ctrl+I，该帧后的关键帧都依次后移。</li>
<li><code>删除帧</code> 删除一个帧，快捷键是Ctrl+D，该帧后的关键帧都依次前移。</li>
<li><code>创建Tween</code> 在两个关键帧之间建立一个Tween。</li>
<li><code>删除Tween</code> 删除两个关键帧之间的Tween。</li>
</ul>
<p>右键菜单2：</p>
<p><img src="../../images/20170808105119.png" alt></p>
<ul>
<li><code>复制时间轴</code> 复制时间轴。</li>
<li><code>粘贴时间轴</code> 将复制的时间轴粘贴到选定的时间轴。源和目标应该具有相同的属性。</li>
<li><code>删除时间轴</code> 删除选定的时间轴。</li>
<li><code>更改目标对象</code> 修改时间轴的目标对象。</li>
</ul>
<h2 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h2><p>查询一个资源被其他资源引用的情况，或者查询一个资源引用其他资源的情况。并且可以替换查询结果里的引用。</p>
<p>在资源库视图中，选中某个资源后，在右键菜单选择“查询依赖关系”，可以激活引用视图。</p>
<p><img src="../../images/QQ20191209-115743.png" alt></p>
<ol>
<li><code>查询依赖我的资源</code> <code>查询我依赖的资源</code> 后者一般用于组件。</li>
<li>可以在此拖入需要操作的资源。</li>
<li>点击下拉箭头可以切换为替换模式。点击后出现如下界面：<br><img src="../../images/QQ20191209-121136.png" alt><br>在下方的输入框拖入希望替代的资源，然后点击替换。<strong>注意，要先查询后才能替换。</strong></li>
<li>查询结果列表。</li>
</ol>
<h2 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h2><p><img src="../../images/QQ20191209-121602.png" alt></p>
<p>输入关键字，搜索名称里含有关键字的资源。关键字不区分大小写。</p>
<h2 id="控制台"><a href="#控制台" class="headerlink" title="控制台"></a>控制台</h2><p><img src="../../images/QQ20191209-121725.png" alt></p>
<p>显示软件输出的提示、警告和错误信息。</p>
<ul>
<li><img src="../../images/msg_info.png" alt> 提示信息。</li>
<li><img src="../../images/msg_warning.png" alt> 警告信息。这类信息不影响软件的正常使用，但建议按信息的提示去解决问题。</li>
<li><img src="../../images/msg_error.png" alt> 错误信息。建议通过社区向开发商报告这类信息。</li>
</ul>
<h2 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h2><p><img src="../../images/QQ20191209-140837.png" alt></p>
<p>预览界面显示当前资源库选中资源的缩略图。</p>
<p>点击右上角<img src="../../images/QQ20191209-141105.png" alt>弹出如下菜单：</p>
<ul>
<li><code>为组件生成预览</code> 可以切换是否为组件生成缩略图。在一些低配置电脑上可以取消这个功能以提高软件运行速度。</li>
</ul>
<h2 id="检查器"><a href="#检查器" class="headerlink" title="检查器"></a>检查器</h2><p>点击舞台中任意一个或多个元件，编辑器右侧将显示对应的属性面板。<strong>如果你点击舞台的空白处（不选中任何东西），则显示的是容器组件的属性面板。</strong></p>
<p><img src="../../images/QQ20191206-215237.png" alt></p>
<p>后续介绍各个资源类型使用方法时再详细介绍这里的属性含义。</p>
<h2 id="文档视图"><a href="#文档视图" class="headerlink" title="文档视图"></a>文档视图</h2><h3 id="侧工具栏"><a href="#侧工具栏" class="headerlink" title="侧工具栏"></a>侧工具栏</h3><p><img src="../../images/sidetb_01.png" alt> 选择模式。</p>
<p><img src="../../images/sidetb_02.png" alt> 自由滚动模式。特别的，在选择模式下，按住空格就可以临时切换为自由滚动模式，释放空格就可以恢复为选择模式。</p>
<p><img src="../../images/sidetb_03.png" alt> 文本控件。</p>
<p><img src="../../images/sidetb_04.png" alt> 富文本控件。</p>
<p><img src="../../images/sidetb_05.png" alt> 图形控件。</p>
<p><img src="../../images/sidetb_06.png" alt> 列表控件。</p>
<p><img src="../../images/sidetb_07.png" alt> 装载器控件。</p>
<p><img src="../../images/sidetb_08.png" alt> 为当前选中的元件创建一个组合。</p>
<p><img src="../../images/sidetb_09.png" alt> 取消当前组合。</p>
<p><img src="../../images/sidetb_10.png" alt> <img src="../../images/sidetb_11.png" alt> <img src="../../images/sidetb_12.png" alt> <img src="../../images/sidetb_13.png" alt> <img src="../../images/sidetb_14.png" alt> <img src="../../images/sidetb_15.png" alt> <img src="../../images/sidetb_16.png" alt> <img src="../../images/sidetb_17.png" alt> 对齐操作。选定多个元件后，再点击这里的按钮，可以执行对应的对齐功能。例如选定两个元件后，点击左右居中，则两个元件将设置为中线对齐。<strong>如果只选择了一个元件，则该元件对容器组件执行对应的对齐功能</strong>。例如，选定一个元件后，点击左右对齐，则元件将移到容器组件的中间位置。又例如，选定一个元件后，点击相同宽度，则元件的宽度将设置为与容器组件相同。</p>
<p><img src="../../images/sidetb_18.png" alt> <img src="../../images/sidetb_19.png" alt> <img src="../../images/sidetb_20.png" alt> 可以将选定的元件安排均匀行距、均匀列距或者表格的方式排列。</p>
<h3 id="控制器工具栏"><a href="#控制器工具栏" class="headerlink" title="控制器工具栏"></a>控制器工具栏</h3><p><img src="../../images/QQ20191206-213755.png" alt> </p>
<p>点击加号可以增加新的控制器。点击控制器名称可以进入控制器编辑界面。点击控制器的各个页面按钮切换页面。</p>
<h3 id="舞台"><a href="#舞台" class="headerlink" title="舞台"></a>舞台</h3><p>舞台是组件的编辑区域。添加内容到舞台的方法有：</p>
<ul>
<li>在侧工具栏上点击基础控件，然后点击舞台。</li>
<li>从资源库或收藏夹中直接拖拽资源到编辑区域。</li>
<li>可直接粘贴剪贴板中的文字或图片。如果是图片，会先导入到资源库，再自动放置到舞台上。</li>
<li>可以从系统的文件管理器或者访达中直接拖入资源。如果该资源是位于assets目录下的，也就是说是包里的资源，那么不会发生资源重复导入到资源库的情况。</li>
</ul>
<p>中间不同于周边颜色的是组件的主要显示区域。虽然你并不需要把所有内容都放置到组件区域内，因为默认情况下，超出组件区域的内容依然会被显示，但组件的大小仅由组件区域决定，而不会计算所有孩子的包围。某些特别的功能，例如滤镜，只对组件区域生效，所以建议把内容尽量放置在组件区域内。</p>
<p>常用的舞台操作有：</p>
<ul>
<li><p><code>选定</code> 点击一个元件单选，按住SHIFT点击多个元件多选。点击空白处取消所有选择。在空白处按下并拖动进行框选。</p>
</li>
<li><p><code>移动</code> 按住元件拖动，如果拖动时按住SHIFT，则移动限制在垂直方向或者水平方向。使用键盘上、下、左、右箭头键可以移动选定的元件，每按一次移动1像素，如果同时按下SHIFT键，则移动加速，每次移动10像素。</p>
</li>
<li><p><code>缩放</code> 拖拽选定框边缘的8个把柄，可以改变元件的宽度和高度。如果拖拽把柄的同时按住SHIFT键，则强制保持长宽比。</p>
</li>
<li><p><code>组合</code> 选定多个元件后，按CTRL+G建立一个组合。</p>
</li>
</ul>
<p>舞台右键菜单：</p>
<ul>
<li><p><code>交换位置</code> 将选定的两个元件交换位置。</p>
</li>
<li><p><code>替换元件</code> 可以将当前选中的元件替换成另外一个元件，位置大小等所有属性都会保留。</p>
</li>
<li><p><code>转换为组件</code> 可以将当前选中的一个或多个元件替换成一个单独的组件，这个组件的内容包含选中的内容，选择的内容则被清除。</p>
</li>
<li><p><code>转换为位图</code> 可以将当前选中的一个或多个元件替换成一个单独的图片，这个图片的内容由选中的内容绘制而成，选择的内容则被清除。生成的图片自动加入资源库中。</p>
</li>
<li><p><code>在库中显示</code> 在库中高亮显示当前选中的元件。</p>
</li>
</ul>
<h2 id="测试界面"><a href="#测试界面" class="headerlink" title="测试界面"></a>测试界面</h2><p><img src="../../images/QQ20191207-214959.png" alt></p>
<p>测试界面由以下几个部分组成：</p>
<ol>
<li>点这里退出测试模式。</li>
<li>设置适配测试参数的地方。</li>
<li>控制器列表。点击控制器的各个页面按钮切换页面。</li>
<li>这里显示组件运行时的形态。</li>
<li>各个功能视图。用户可以按使用习惯将它们拖动到不同位置，也可以关闭。右键点击面板标题栏，在右键菜单中选择关闭即可。如果要重新打开，在“主菜单-&gt;视图”里操作。测试模式下默认显示动效视图和控制台视图。</li>
</ol>
<h3 id="适配测试"><a href="#适配测试" class="headerlink" title="适配测试"></a>适配测试</h3><p><img src="../../images/QQ20191209-141815.png" alt></p>
<ol>
<li>如果当前设计的组件需要进行适配测试，可以勾选“适配测试”选项。</li>
<li>打开全局适配参数的设置。第一次使用适配测试前应该进行<a href="project_settings.html#适配测试">全局适配参数的设置</a>。</li>
<li>适应屏幕设置。<strong>注意：这里的设置只用于适配测试，实际运行时顶层组件在尺寸和位置，需要用代码设置。</strong><ul>
<li><code>全屏</code> 指组件铺满屏幕，这时组件尺寸与逻辑屏幕尺寸相等。</li>
<li><code>适应高度，左右居中</code> 以组件的高度与逻辑屏幕高度的比例为基准，调整组件的宽度。例如，如果组件高度是逻辑屏幕高度的1/2，适配后组件高度与逻辑屏幕高度相等（放大2倍），则组件宽度也设置为逻辑屏幕宽度的2倍。无论水平方向是不足还是溢出，组件的位置都设置在逻辑屏幕的中心。</li>
<li><code>适应宽度，上下居中</code> 以组件的宽度与逻辑屏幕宽度的比例为基准，调整组件的高度。例如，如果组件宽度是逻辑屏幕宽度的1/2，适配后组件宽度与逻辑屏幕宽度相等（放大2倍），则组件高度也设置为逻辑屏幕高度的2倍。无论垂直方向是不足还是溢出，组件的位置都设置在逻辑屏幕的中心。</li>
</ul>
</li>
<li>测试的设备。提示：可以在“<a href="project_settings.html#适配测试">项目设置-适配测试-设备配置</a>”里增加其他设备。</li>
<li>横屏和竖屏切换。</li>
</ol>
<p>适配测试时请注意：如果你在动效播放的过程中改变屏幕大小，而这个动效有涉及到带适配设置的元件，那么动效可能播放异常。所有请不要在动效播放的过程中改变屏幕大小。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/index.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
